<template>
	<view class="contair">
		<view class="tips">
			<view class="tips-txt">
				*加急审核请联系校区客服
			</view>
			<view class="btn-txt">
				复制微信
			</view>
		</view>

		<!-- 店铺 -->

		<view class="dianpu">
			<view class="itembox">
				<view class="lefttxt">
					店铺名称
				</view>
				<view class="input-box">
					<input type="text" placeholder="请输入店铺名称" v-model="form_data.name" />
				</view>
			</view>

			<view class="itembox">
				<view class="lefttxt">
					店铺类型
				</view>
				<view class="input-box" @click="open">
					<view class="dian-txt">
						{{category_txt?category_txt:'请选择店铺类型'}}
					</view>
					<image src="/static/yjt.png" style="width: 40rpx;height: 40rpx;" mode=""></image>
				</view>
			</view>
		</view>

		<!-- 店铺介绍 -->
		<view class="jieshao">
			<view class="js-txt">
				店铺介绍
			</view>
			<textarea name="jieshao-s" id="jieshao-s" cols="30" rows="10" placeholder="请介绍下您的店铺"
				v-model="form_data.introduction"></textarea>
		</view>


		<!-- 店铺地址 -->
		<view class="address-box">
			<view class="add-txt">
				店铺地址
			</view>
			<input type="text" placeholder="请输入店铺地址" v-model="form_data.address" />
		</view>

		<!-- 门店LOGO -->
		<view class="logo-box">
			<view class="logo-txt">
				门店LOGO
			</view>
			<view class="img-box">
				<image v-if="form_data.logo_image == ''" src="/static/forum/uploads.png"
					style="width: 124rpx;height: 124rpx;" mode="" @click="uploadsimg">
				</image>
				<image @click="mendel" v-else :src="form_data.logo_image" style="width: 124rpx;height: 124rpx;" mode="">
				</image>
			</view>
		</view>

		<view class="men-box">
			<view class="men-txt">
				<view class="titles">
					门店照
				</view>
				<view class="tipss">
					*最多5张照片
				</view>
			</view>
			<view class="men-img">
				<view class="itemimg" v-for="(i,k) in form_data.environment_images" :key="k">
					<image @click="del" :src="i" style="width: 124rpx;height: 124rpx;" mode=""></image>
				</view>
				<image v-if="form_data.environment_images.length < 5" src="/static/forum/uploads.png"
					style="width: 124rpx;height: 124rpx;" mode="" @click="uploadsmenimg">
				</image>
			</view>
		</view>

		<!-- 申请人 -->
		<view class="shenqing">
			<view class="itembox">
				<view class="left-txt">
					申请人
				</view>
				<input type="text" placeholder="请输入真实姓名" v-model="form_data.realname" />
			</view>
			<view class="itembox1">
				<view class="left-txt">
					联系电话
				</view>
				<input type="text" placeholder="请输入请输入联系电话" v-model="form_data.mobile" />
			</view>
		</view>

		<!-- 账号 -->
		<view class="shenqing1">
			<view class="itembox">
				<view class="left-txt">
					店铺账号
				</view>
				<input type="text" placeholder="请设置店铺账号" v-model="form_data.account" />
			</view>
			<view class="itembox1">
				<view class="left-txt">
					店铺密码
				</view>
				<input type="text" placeholder="请设置店铺密码" v-model="form_data.password" />
			</view>
		</view>

		<view class="zhanbox">

		</view>

		<view class="btn-box">
			<view class="btn-txt" @click="submit">
				提交审核
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="popbox">
				<view class="tab-item" v-for="(i,k) in leixing" :key="k" @click="hah(i,k)">
					<view :class="['tab-item', { selected: selectedIndices == k ? 'selected':''}]">
						{{i.name}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var app = getApp( );
	import ikz from '@/pages/Common/tools.js';
	export default {
		data( ) {
			return {
				logoimg: '/static/forum/success.png',
				menimg: [
					'/static/forum/success.png',
					'/static/forum/success.png',
					'/static/forum/success.png',
					'/static/forum/success.png',
				],
				menimg: [ ],
				leixing: [ ],
				selectedIndices: 0,
				form_data: {
					name: '',
					introduction: '',
					address: '',
					logo_image: '',
					environment_images: [ ],
					realname: '',
					mobile: '',
					account: '',
					password: '',
					business_category_id: ''
				},
				agent_id: '',
				category_txt: ''
			}
		},
		methods: {
			getfenlei( ) {
				var path = '/xyb/supermarket/Index/Index';
				var data = {
					token: uni.getStorageSync( 'local_user_session' ),
					agent_id: uni.getStorageSync( 'default_agent' ).id || ''
				}
				ikz.post( path, data, res => {
					console.log( res, 'ssssss' );
					if ( res.data.code ) {
						this.leixing = res.data.data.supermarket_category_list

					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} );
			},
			uploadsimg( ) {
				console.log( '上传' );
				var that = this;
				wx.chooseImage( {
					count: 1,
					sizeType: [ 'original', 'compressed' ],
					sourceType: [ 'album', 'camera' ],
					success( res ) {
						// tempFilePath可以作为img标签的src属性显示图片
						console.log( res, 'resss' );
						that.image = res.tempFilePaths[ 0 ];
						that.form_data.logo_image = res.tempFilePaths[ 0 ];
						that.$forceUpdate( );
					}
				} )
			},
			del( ) {
				var _this = this
				uni.showModal( {
					title: '提示',
					content: '是否要删除该门店logo',
					success: function( res ) {
						if ( res.confirm ) {
							console.log( '用户点击确定' );
							_this.logoimg = '/static/forum/collection-check.png'
						} else if ( res.cancel ) {
							console.log( '用户点击取消' );
						}
					}
				} );

			},
			uploadsmenimg( ) {
				console.log( '门店上传' );
				var that = this;
				wx.chooseImage( {
					count: 5,
					sizeType: [ 'original', 'compressed' ],
					sourceType: [ 'album', 'camera' ],
					success( res ) {
						// tempFilePath可以作为img标签的src属性显示图片
						console.log( res, 'resss' );
						that.form_data.environment_images = res.tempFilePaths;
						that.$forceUpdate( );
					}
				} )
			},
			mendel( ) {
				console.log( '删除' );
				t
			},
			open( ) {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.getfenlei( )
				this.$refs.popup.open( 'bottom' )
			},
			hah( item, index ) {
				console.log( index, '每一项' );
				this.selectedIndices = index

				console.log( this.selectedIndices, 'selectedIndices' );
				this.form_data.business_category_id = item.id
				this.category_txt = item.name

				this.$refs.popup.close( )
			},

			submit( ) {
				var path = '/merchant/insert';
				var data = this.form_data;
				ikz.post( path, data, res => {
					console.log( res, 'ssssss' );
					if ( res.data.code == 1 ) {
						// this.leixing = res.data.data.supermarket_category_list
						uni.showToast( {
							title: '提交成功',
							icon: 'none'
						} )

						setTimeout( ( ) => {
							uni.navigateTo( {
								url: '/pages/Component/Module/merchant/apply/success/index'
							} )
						}, 500 )

					} else {
						uni.showModal( {
							title: '提示',
							content: res.data.msg,
							showCancel: false,
							success: function( res ) {}
						} );
					}
				} );
			}
		},
	}
</script>

<style lang="scss" scoped>
	.contair {
		background-color: #F5F5F5;
	}

	.tips {
		width: 100%;
		height: 114rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 24rpx;
		box-sizing: border-box;

		.tips-txt {
			height: 48rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #247EFF;
			text-align: left;
		}


		.btn-txt {
			width: 164rpx;
			height: 66rpx;
			background: #F5F7FB;
			border-radius: 46rpx 46rpx 46rpx 46rpx;
			border: 1rpx solid #247EFF;
			font-weight: 400;
			font-size: 28rpx;
			color: #247EFF;
			text-align: center;
			line-height: 66rpx;
		}
	}


	.dianpu {
		width: 750rpx;
		height: 204rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin: 24rpx auto;

		.itembox {
			width: 750rpx;
			height: 102rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-bottom: 1rpx solid #F8F8F8;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.input-box {
				text-align: right;
				display: flex;
				color: #666666;
			}

		}
	}

	.jieshao {
		width: 750rpx;
		height: 262rpx;
		background: #FFFFFF;
		padding: 22rpx 30rpx;
		box-sizing: border-box;

		.js-txt {
			width: 100%;
			height: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			text-align: left;
		}

		#jieshao-s {
			width: 690rpx;
			height: 160rpx;
			background: #F5F5F5;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-top: 16rpx;
			padding: 10rpx;
			box-sizing: border-box;
			font-size: 24rpx;
		}
	}

	.address-box {
		width: 750rpx;
		height: 102rpx;
		background: #FFFFFF;
		margin-top: 24rpx;
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.add-txt {
			width: 172rpx;
			height: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			text-align: left;
		}

		input {
			font-size: 28rpx;
			color: #666666;
			text-align: right;
		}
	}

	.logo-box {
		width: 750rpx;
		height: 228rpx;
		background: #FFFFFF;
		margin-top: 24rpx;
		padding: 22rpx 30rpx;
		box-sizing: border-box;

		.logo-txt {
			width: 100%;
			height: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #222222;
			text-align: left;
			margin-bottom: 16rpx;
		}


	}

	.men-box {
		width: 750rpx;
		height: 228rpx;
		background: #FFFFFF;
		margin-top: 24rpx;
		padding: 22rpx 30rpx;
		box-sizing: border-box;

		.men-txt {
			width: 100%;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 16rpx;

			.titles {
				width: 124rpx;
				height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
			}

			.tipss {
				width: 184rpx;
				height: 36rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF4F21;
				text-align: right;
			}
		}

		.men-img {
			width: 100%;
			height: 124rpx;
			display: flex;

			.itemimg {
				margin-right: 16rpx;
			}
		}
	}

	.shenqing {
		width: 750rpx;
		height: 204rpx;
		background: #FFFFFF;
		margin-top: 24rpx;


		.itembox {
			width: 750rpx;
			height: 100rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F8F8F8;

			.left-txt {
				width: 112rpx;
				height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
			}

			input {
				font-size: 28rpx;
				color: #222222;
				text-align: right;
			}
		}

		.itembox1 {
			width: 750rpx;
			height: 100rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-txt {
				width: 112rpx;
				height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
			}

			input {
				font-size: 28rpx;
				color: #222222;
				text-align: right;
			}
		}
	}

	.shenqing1 {
		width: 750rpx;
		height: 204rpx;
		background: #FFFFFF;
		margin-top: 24rpx;


		.itembox {
			width: 750rpx;
			height: 100rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F8F8F8;

			.left-txt {
				width: 112rpx;
				height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
			}

			input {
				font-size: 28rpx;
				color: #222222;
				text-align: right;
			}
		}

		.itembox1 {
			width: 750rpx;
			height: 100rpx;
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.left-txt {
				width: 112rpx;
				height: 40rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				text-align: left;
			}

			input {
				font-size: 28rpx;
				color: #222222;
				text-align: right;
			}
		}
	}

	.zhanbox {
		width: 750rpx;
		height: 196rpx;
		background-color: #F5F5F5;
	}

	.btn-box {


		width: 750rpx;
		height: 176rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 1;

		.btn-txt {
			width: 690rpx;
			height: 88rpx;
			background: #247EFF;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 88rpx;
			margin: 14rpx auto;
		}
	}

	.popbox {
		width: 750rpx;
		min-height: 520rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.tab-item {
			width: 750rpx;
			height: 124rpx;
			text-align: center;
			line-height: 124rpx;
			color: #666666;

			.selected {
				/* 选中时的样式，比如背景色为红色 */
				color: #020001;
			}
		}

	}
</style>